<template>
  <div class="chart-box">
    <div class="chart" ref="chartBox"></div>
  </div>
</template>
<script>
// import { formatTime } from "@/utils/tool";
export default {
  data() {
    return {
      chartData: [],
      chartObj: null,
      type: 'line'
    };
  },
  props: ['option'],
  methods: {
    resize: function () {
      this.chartObj.resize();
    },
    changeType() {
      this.setOption()
    },
    setOption() {
      let data = this.chartData.data.map(e => e[1])
      if (this.chartData.type == 'pie') {
        data = data.splice(42)
        console.log(data)
      }
      let series = [{
        data,
        name: this.chartData.label,
        type: this.chartData.type,
        // radius: '50%',
      }]
      console.log(series)
      let text = this.chartData.label + this.chartData.type
      let option = {
        title: {
          text, textStyle: {
            fontSize: '18px',
            fontWeight: 600,
            color: this.$AxisColor
          }
        },
        xAxis: {
          type: 'category',
          data: this.chartData.data.map(e => e[0]),
          axisLine: {//x轴线的颜色以及宽度
            lineStyle: {
              color: this.$AxisColor,
              type: "solid"
            }
          },
        },
        color: ['rgb(255, 70, 131)'],
        yAxis: {
          type: 'value',
          min: '50',
          max: "0",
          axisLine: {//x轴线的颜色以及宽度
            lineStyle: {
              color: this.$AxisColor,
              type: "solid"
            }
          },
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series
      };
      this.chartObj.clear();
      this.option && this.chartObj.setOption(option);
    },
  },
  mounted() {
    this.chartData = this.option
    this.chartObj = this.$echarts.init(this.$refs.chartBox);
    this.chartData && this.setOption();

    window.addEventListener("resize", () => {
      this.resize();
    });
  },
  watch: {
    option(val) {
      console.log(val)
      // this.chartData = val
      // this.setOption()
      let yAxis = val.values.map(e => (e[1] * 100).toFixed(2))
      let yAxis2 = val.values.map(e => (e[1] * 80).toFixed(2))
      
      this.chartObj.setOption({
        series: [
          {
            data: yAxis,
            type: 'line',
            smooth: 0.6,
          },
          {
            data: yAxis2,
            type: 'bar'
          }
        ]
      });
    }
  },
  beforeDestroy() {
    this.chartObj.dispose();
    this.chartObj.clear();
    window.removeEventListener("resize", this.resize);
  },
};
</script>
<style scoped lang="less">
.chart-box {
  height: 100%;
  width: 100%;
  padding: 10px 0 0 20px;
  box-sizing: border-box;
  position: relative;
  .change-type {
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 6;
  }
  .chart{
    height: 100%;
    width: 100%;
  }
}
</style>